<template>
    <div id="Idea">
        <div class="content w clearfix">
            </div>
            <div class="info">
                <p>基本信息</p>
                <hr>
            </div><br>
            <table class="information">
                <tr>
                    <td style="width:80px;">账号</td>
                    <td><input type="text" v-model="name"></td>
                </tr><br>
                <tr>
                    <td>真实姓名</td>
                    <td><input type="text" v-model="realName"></td>
                </tr><br>
                <tr>
                    <td>手机号码</td>
                    <td><input type="text" v-model="mobile"></td>
                </tr><br>
                <tr>
                    <td>邮箱</td>
                    <td><input type="text" v-model="email"></td>
                </tr><br>
                <tr>
                    <td>家庭地址</td>
                    <td><input type="text" v-model="address"></td>
                </tr><br>
                <tr>
                    <td>密保关键字</td>
                    <td><input type="text" v-model="save"></td>
                </tr>
                <tr style="text-align:left;">
                    <td colspan=2><button @click="update()">更新</button></td>
                </tr>
            </table><br><br><br><br>
        </div>
</template>

<script>
    export default {
        data() {
            return {
                name: '',
                realName:'',
                mobile:'',
                email:'',
                address:'',
                save:''
            }
        },
        mounted(){
            var _this = this;
            this.http.post('/users/info').then(function (res) {
                if (res.data.login == 0) {
                    console.log('用户未登录')
                } else if (res.data.login == 1) {
                    _this.name = res.data.name
                    _this.realName = res.data.realName,
                    _this.address = res.data.address,
                    _this.mobile = res.data.mobile,
                    _this.email = res.data.email,
                    _this.save = res.data.save,
                    _this.$nextTick(function () {
                        _this.url = '/users/show/' + _this.avator
                    })
                }
            })
        },
        methods:{
            update(){
                var params = new URLSearchParams();
                params.append('name', this.name);
                params.append('realName', this.realName);
                params.append('mobile', this.mobile);
                params.append('email', this.email);
                params.append('address', this.address);
                params.append('save', this.save);
                this.http.post('/users/my', params).then(function (res) {
//                    console.log(res);
                }).catch(function (err) {

                })
            }
        }
    }
</script>

<style scoped>
    .content {
        background-color: #FAFAFA;
    }

    .content .top {
        /*float: left;*/
    }

    .people-img {
        padding-top: 30px;
        width: 960px;
        height: 180px;
        text-align: center;

    }

    .content .top p {
        height: 20px;
        /*padding-top: 210px;*/
        font-size: 24px;
        /*  background: #FAFAFA url(../assets/images/__idea/u29.jpg) center center no-repeat;*/
        text-align: center;
    }

    .content ul {
        float: left;
        width: 704px;
        border: 1px solid #D9D9D9;
        list-style: none;
        margin: 0 auto;
        margin-top: 40px;
        margin-left: 134px;
        margin-right: 134px;
        border-radius: 5px;
    }

    .content ul li {

        float: left;
        line-height: 51px;
        padding: 5px 0 5px 0;
        width: 175px;
        font-size: 20px;
        background-color: white;

    }

    .content ul li a {
        display: block;
        line-height: 51px;
        text-align: center;
        border-right: 1px solid #E9E9E9;
    }

    .content ul li a:hover {

    }

    .content .p28 {
        margin: 20px 0;
        float: right;
        font-family: "微软雅黑";
        font-size: 20px;
        margin-right: 85px;

    }

    .content .list {
        float: left;
        width: 787px;
        height: 154px;
        border: 1px solid #D9D9D9;
        margin: 0 100px 20px 100px;
        font-family: "SimSun", "宋体";
        font-weight: bold;
    }

    .content .list p {
        float: left;
        margin-left: 20px;
        margin-right: 100px;
        font-size: 18px;
        padding-top: 20px;

        /*font;*/
    }

    .content .list .book {
        float: left;
        width: 200px;
        margin-top: 80px;
        font-size: 20px;
        font-weight: bold;
    }

    .content .book .number {
        text-align: right;
        font-weight: normal;
        font-size: 14px;
    }

    .content dl {
        float: right;
        padding-top: 50px;
        padding-right: 60px;
        font-size: 18px;

    }

    .content dl dd {
        padding-left: 30px;
        padding-top: 15px;
    }

    .content dt .ing {
        color: red;
    }

    .content dt .succeed {
        color: green;
    }

    .info{
        width: 700px;
        /*border: 1px blue solid;*/
        margin: 0 auto;
        margin-top: 20px;
        padding-left: 12px;
    }

    .info p{
        color: black;
        font-size: 18px;
        font-weight: bolder;
        display: block;
    }

    .info hr{
        width: 620px;
        display: block;
        margin-top: -10px;
        margin-left: 80px;
    }

    .information{
        width: 700px;
        margin: 0 auto;
        padding-left: 12px;
    }

    .information td{
        text-align: left;
        font-size: 16px;
    }

    .information td input{
        width: 580px;
        height: 30px;
        border: 1px solid #D9D9D9;
        border-radius: 4px;
        font-size: 16px;
        padding-left: 10px;
        margin-left: 30px;
    }


    td button{
        width: 60px;
        height: 30px;
        background-color: #d6d6d6;
        font-size: 16px;
        float: right;
        border-radius: 3px;
        margin-top: 80px;
        padding-bottom: 2px;
        margin-right: 320px;
    }

    td button:hover{
        background-color: #eab31d;
        color: white;
        cursor: pointer;
    }
</style>
